
// 二:轮播图初始化
var mySwiper = new Swiper ('.swiper', {
    loop: true, // 循环模式选项
    autoplay: true,
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
});

// 二、原生js轮播图
// 2.1、获取所需要的操作的标签对象
let imgs = document.querySelectorAll('.banner .pic');
let bannerPages = document.querySelectorAll('.banner .banner-btn a');

// 2.2、将重复代码封装为函数
function bannerPlay(index){   // 这个形参index是需要被激活的对象的下标；
  // 设置默认状态
  imgs.forEach(function(v2,i2){
    v2.classList.remove('on');
    bannerPages[i2].classList.remove('on');
  });
  imgs[index].classList.add('on');
  bannerPages[index].classList.add('on');
};

// 2.3、轮播图自动播放，需要使用定时器
// 设置初始值，由于默认显示的第一张图片，下标为0。因此定时器的第一张图片可以从第二张开始，会比较顺畅
let m = 1;
let timer1;    // 因为在后面有两次需要清除定时器，因此这里将timer定义为全局变量
// 后面要启用定时器，因此可以将定时器封装成一个函数，需要的时候直接调用；
function timer1Play(){            // 这个函数可以不需要形参，因为它自身会实时保存里面的变量
  timer1 = setInterval(function(){
    // 这里的m不需要必须通过timer1Play()的形参和实参传递
    bannerPlay(m);
    m++;
    if (m === imgs.length) {
      m = 0;
    };
  },2000);
};

// 2.4、页面加载后就需要开启自动播放，因此需要调用一下。这里直接调用，进而调用bannerPlay(m),这时这个m是实参，他会找初始值；
timer1Play();

// 2.5、分页符播放
bannerPages.forEach(function(v,i){

  // 事件1：分页符鼠标移入事件，需要清除定时器，而且这个分页符对应的图片需要显示出来
  v.addEventListener('mouseover',function(){
    clearInterval(timer1);       // 清除定时器，扩充：这时的定时器中会记录一个变量，这个变量是bannerPlay(m)中的此刻的m；
    bannerPlay(i);   // 调用bannerPlay(i)函数，实参为这个v对应的i，即让这个v对应的样式激活；这个只是一个动作，一次性发生
  });

  // 事件2：分页符鼠标移入事件，需要启动定时器，而且要从当前页的下一页开始
  v.addEventListener('mouseout',function(){
    i === bannerPages.length-1 ? m = 0 : m = i + 1;    // 三元表达式
    timer1Play();   // 当鼠标移出。继续启用定时器，调用定时器函数，继而调用bannerPlay(m)，这里的m实参在上面刚好被重新赋值；如果不重新赋值，m的值将会是上次定时器停止时记录的值
  });
});

// 2.6、左右两边按钮事件
let bannerBtns = document.querySelectorAll('.banner section span');
bannerBtns.forEach(function(v,i){
  // 事件3：左右两边按钮鼠标移入事件，画面切换需要停止
  v.addEventListener('mouseover',function(){
    clearInterval(timer1);    // 鼠标移入，清除定时器，这时定时器也会记录此刻的m值；如果下一次直接调用定时器，m也未被重新赋值，那么会继续接着这个值开始
  });

  // 事件4：左右两边按钮鼠标点击事件，画面切换手动切换
  v.addEventListener('click',function(){
    let f;
    // 当点击右边按钮，图片需要切换下一张
    if(i === 1){
      // 这时需要拿到当时的停止的图片的下标，m-1，当当点击事件发生，即切换下一张图片，下标为m
      f = m;
      bannerPlay(f);   // 调用bannerPlay(f)，下标为f  
      m++;      // 动态赋值给m  
      m === bannerPages.length ? m = 0 : m = m;     // 特殊情况判断  
    }else{
      // m是定时器停止时对应的那个按钮的下一个下标；算好m和即将切换的图片下标的关系，然后动态的给m-- 即可保持图片切换，也可保持m时刻动态赋值
      m === 0 ?  m = imgs.length-1 : m--;    // 特殊情况判断  
      // 下面的f是停止的图片的前一个图片的下标
      f = m - 1;
      // f === -1 ? f = imgs.length-1 : f = f;   // 特殊情况判断
      if (f === -1) f = imgs.length-1;        // 特殊情况判断,另一种写法
      bannerPlay(f);
    };
  });

  // 事件5：左右两边按钮鼠标移出事件，需要从当前页开始启动定时器
  v.addEventListener('mouseout',function(){
    timer1Play();  // 鼠标移出，需要再次启用定时器，继而调用bannerPlay(m)；这时的m是最新的赋值，若前面没有被重新赋值，则还是上一次定时器终止记录的m
  })
});



// 三:海量的API服务，丰富的API分类
let lis = document.querySelectorAll('.API li');

// oldName是截取出来的每个原始的图片名，鼠标移入和移出都要使用，只需要拿一次，对于每个照片来说是唯一的，因此只需要在移入事件中拿一次即可，保存在全局中
let oldName = "";
lis.forEach(function(v,i){
  v.addEventListener('mouseover',function(){
    this.style.backgroundColor = '#0af';
    let start = this.querySelector('img').src.lastIndexOf('/')+1;
    let end = this.querySelector('img').src.lastIndexOf('.');
    oldName = this.querySelector('img').src.substring(start,end);
    this.querySelector('img').src = "./images/"+oldName+"-c.svg";
    this.querySelector('p').style.color = '#fff';
  });
  v.addEventListener('mouseout',function(){
    this.querySelector('p').style.color = '#000';
    this.style.backgroundColor = '';
    this.querySelector('img').src = "./images/"+oldName+".svg"
  });
});


// 四:助力行业巨头 / 独角兽企业

let sections = document.querySelectorAll('.help section');
// 将设置默认状态,以及对应下标切换到激活状态封装为函数
function play(x){
  sections.forEach(function(v,i){
    v.classList.remove('on');
  })
  sections[x].classList.add('on');
}

// 定时器需要需要设置一个初始值,这里从下标为0开始
let n = 0;
// 这里的timer在后面还要用到,因此设置为全局变量
let timer;
// 将定时器封装为一个函数
function timerPlay(n){
  timer = setInterval(function(){
    play(n);
    n++;
    if (n ===  sections.length) {
      n = 0;
    }
  },1500);
};
// 函数需要调用才执行
timerPlay(n);

// 设置鼠标事件
sections.forEach(function(v,i){
  // 鼠标移上去的效果
  v.addEventListener('mouseover',function(){
    clearInterval(timer);
    play(i);
  });
  // 鼠标移出去的效果
  v.addEventListener('mouseout',function(){
    if (i === sections.length-1) {
      n = 0;
    }else{
      n = i+1;
    }
    timerPlay(n);
  });
});


// 五:返回顶部
// 监听滚动条滚动事件
let backTop = document.querySelector('.back-top');
onscroll = function(){
  if (window.scrollY >= 300) {
    backTop.style.display = 'block';
  }else{
    backTop.style.display = 'none';
  }
}
// 添加点击事件
backTop.addEventListener('click',function(){
  let y = window.scrollY;
  let timer = setInterval(function(){
    y -= 200;
    window.scrollTo(0,y);
    if (y <= 0) {
      clearInterval(timer);
    }
  },18);
})